<!-- 课程表 -->
<template>
	<view class="class">
		<u-navbar 
		ref="navbar"
		back-icon-color="#ffffff" 
		:back-text-style="{ color: '#ffffff' }" 
		back-text="返回" 
		:background="{backgroundColor: '#007AFF'}">
			<view class="slot-navbar acea-row row-center" @click="navbarHandle">
				{{navInfo}}<u-icon name="arrow-down" color="#ffffff" size="28" class="icon"></u-icon>
			</view>
		</u-navbar>
		<u-table>
			<u-tr ref="tr1">
				<u-th v-for="(item,index) in top" :key="index">{{item.title}}</u-th>
			</u-tr>
			<u-tr v-for="(item,index) in list" :key="index">
				<u-td class="td" :class="td.topzIndex?'topzIndex':''" :style="'height: '+contentTdHeight+'px;'" v-for="(td,index2) in item.list" :key="index2">
					{{td.title}}
					<block v-for="(classItem,index3) in item.classList" :key="index3">
						<view class="classList acea-row row-middle" @click="tdHandle(classItem)" :style="'height: '+(contentTdHeight*classItem.classTime - 10)+'px;background-color:'+td.bgColor" v-if="classItem.week == td.week">
							<text class="title">{{classItem.title}}</text> 
						</view>
					</block>
				</u-td>
			</u-tr>
		</u-table>
		<u-popup v-model="show" mode="bottom" border-radius="28" height="240px">
			<view class="pop">
				{{classInfo.title}}
			</view>
		</u-popup>
		<u-picker v-model="show2" mode="selector" :range="zhou" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	const data = []
	const top = [
		{id:0,title:"/"},
		{id:1,title:"周一"},
		{id:2,title:"周二"},
		{id:3,title:"周三"},
		{id:4,title:"周四"},
		{id:5,title:"周五"},
		{id:6,title:"周六"},
		{id:7,title:"周日"},
	]
	const left = [1,2,3,4,5,6,7,8,9,10]
	const classList = [
		{
			start:1, // 开始时间
			end:3, // 结束时间
			classTime:3, // 课时
			week:1, // 周一
			title:"线性代数@高数楼501"
		},
		{start:5,end:6,classTime:2,week:1,title:"数据结构与算法@软件楼301"},
		{start:7,end:8,classTime:2,week:2,title:"计算机网络@软件楼301"},
		{start:2,end:3,classTime:2,week:3,title:"英语@语言楼101"},
		{start:5,end:8,classTime:4,week:4,title:"高数@高数楼501"},
		{start:1,end:2,classTime:2,week:5,title:"数据结构与算法@软件楼301"},
		{start:3,end:4,classTime:2,week:5,title:"汇编语言@软件楼301"},
	]
	const bgColorList = ["#228B22","#007AFF","#FF8C00","#e13eaa","#DAA520"]
	export default{
		data(){
			return{
				list:[],
				top,
				contentTdHeight:0,
				show:false,
				show2:false,
				classInfo:{},
				navInfo:"第一周",
				zhou:["第一周","第二周","第三周","第四周","第五周"]
			}
		},
		created() {
			this.init()
		},
		mounted() {
			this.getTdHeight()
		},
		methods:{
			init(){
				let list = [];
				for(let i of left){
					let f = classList.filter(e=>e.start == i)
					let o = {
						list:[],
						classList:[]
					};
					for(let t of top){
						let f2 = f.filter(e=>e.week == t.id)
						if(t.title === "/"){
							o.list.push({title:i,week:t.id,topzIndex:f2.length>0?true:false,bgColor:this.getBgColor(i,t.id)})
						}else{
							o.list.push({title:"",week:t.id,topzIndex:f2.length>0?true:false,bgColor:this.getBgColor(i,t.id)})
						}
						o.classList = o.classList.concat(f2)
					}
					list.push(o)
				}
				// console.log(list)
				this.list = list
			},
			getTdHeight(){
				let navbarHeight = this.$refs.navbar.navbarHeight
				let trHeight = 30
				let contentTdHeight = 0
				uni.getSystemInfo({
					success(res) {
						let windowHeight = res.windowHeight
						let statusBarHeight = res.statusBarHeight
						contentTdHeight = (windowHeight - navbarHeight - trHeight - statusBarHeight)/left.length
						console.log(contentTdHeight)
					}
				})
				this.contentTdHeight = contentTdHeight
			},
			tdHandle(item){
				this.show = true
				this.classInfo = item
			},
			navbarHandle(){
				this.show2 = true
			},
			pickerConfirm(e){
				this.navInfo = this.zhou[e[0]]
			},
			getBgColor(leftId,topId){
				let l = leftId<=5?leftId-1:leftId-5-1
				let t = topId<=5?topId-1:topId-5-1
				let idx = parseInt(t+l)
				idx = idx%5==0?idx:idx%5
				return bgColorList[idx]
			}
		}
	}
</script>

<style scoped>
	.slot-navbar{
		width: 100%;
		color: #FFFFFF;
	}
	.slot-navbar .icon{
		margin-left: 5rpx;
		margin-top: 2rpx;
	}
	.td{
		position: relative;
	}
	.topzIndex{
		z-index: 999;
	}
	.classList{
		width: 90%;
		box-sizing: border-box;
		padding: 10rpx 10rpx;
		position: absolute;
		top: 10rpx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 10rpx;
		opacity: 0.8;
		color: #FFFFFF;
	}
	.classList .title{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		overflow: hidden;
	}
	.pop{
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
